<div id="settings_plugin_cura_engine">

    <div class="pull-right">
        <button class="btn btn-small" data-bind="click: showPluginConfig" title="{{ _('Plugin Configuration') }}"><i class="icon-wrench"></i></button>
    </div>

    {% include "cura_engine_settings_config.jinja2" %}

    <h3>{{ _('Cura Engine Plugin') }}</h3>

    <h4>{{ _('Profiles') }}</h4>

    <div data-bind="visible: profiles.items().length > 0" style="display: none" class="row-fluid">
        
        <div class="pull-right">
            <small>{{ _('Sort by') }}: <a href="#" data-bind="click: function() { profiles.changeSorting('id'); }">{{ _('Identifier') }} ({{ _('ascending') }})</a> | <a href="#" data-bind="click: function() { profiles.changeSorting('name'); }">{{ _('Name') }} ({{ _('ascending') }})</a></small>
        </div>
        <table class="table table-striped table-hover table-condensed table-hover">
            <thead>
                <tr>
                    <th class="settings_plugin_cura_engine_profiles_key">{{ _('Identifier') }}</th>
                    <th class="settings_plugin_cura_engine_profiles_name">{{ _('Name') }}</th>
                    <th class="settings_plugin_cura_engine_profiles_actions">{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: profiles.paginatedItems">
                <tr data-bind="attr: {title: description}">
                    <td class="settings_plugin_cura_engine_profiles_key"><span class="icon-star" data-bind="invisible: !isdefault()"></span> <span data-bind="text: key"></span></td>
                    <td class="settings_plugin_cura_engine_profiles_name" data-bind="text: name"></td>
                    <td class="settings_plugin_cura_engine_profiles_actions">
                        <a href="#" class="icon-star" title="{{ _('Make default') }}" data-bind="enable: !isdefault(), css: {disabled: isdefault()}, click: function() { if (!$data.isdefault()) { $root.makeProfileDefault($data); } }"></a>&nbsp;|&nbsp;
                        <a href="#" class="icon-trash" title="{{ _('Delete Profile') }}" data-bind="enable: !isdefault(), css: {disabled: isdefault()}, click: function() { if (!$data.isdefault()) { $root.removeProfile($data); } }"></a>&nbsp;|&nbsp;
                        <a href="#" class="icon-pencil" title="{{ _('Edit Profile') }}" data-bind="click: function() { $root.editProfile($data); }"></a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="pagination pagination-mini pagination-centered">
            <ul>
                <li data-bind="css: {disabled: profiles.currentPage() === 0}"><a href="#" data-bind="click: profiles.prevPage">«</a></li>
            </ul>
            <ul data-bind="foreach: profiles.pages">
                <li data-bind="css: { active: $data.number === $root.profiles.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.profiles.changePage($data.number); }"></a></li>
            </ul>
            <ul>
                <li data-bind="css: {disabled: profiles.currentPage() === profiles.lastPage()}"><a href="#" data-bind="click: profiles.nextPage">»</a></li>
            </ul>
        </div>
    </div>

    {% include "cura_engine_settings_profile_editor.jinja2" %}

    <button class="btn pull-right" data-bind="click: showImportProfileDialog">{{ _('Import Profile...') }}</button>

    {% include "cura_engine_settings_profile_import.jinja2" %}

</div>
